<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>todolist</title>
    <link rel="stylesheet" href="./stylecss.css">
</head>
<body style="text-align:center; background-color: black;">
<div class="styleBody" id="app">
    <input v-model="todoNewList"  v-on:keyup.enter="addNewList" placeholder="添加一件事！" class="styleInput">
    <ul class="styleUl">
        <li
                is="todo-list"
                v-for="task in tasks" id="{{ $index }}"
                v-drag-and-drop
                drop="handleDrop"
                v-bind:task="task"
                v-on:remove="tasks.splice(index, 1)"
                class="styleList"
        ></li>
    </ul>

</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.17/vue.js"></script>
<script src="./vue-drag-and-drop.js"></script>
<script>
    Vue.component("todo-list",{
        props:['task'],
     template:'\
    <li>\
      <input type="checkbox" name="completed[]"  v-bind:checked="task.completed" v-bind:value="task"  >\
      <strong>{{ task }}</strong>\
      <button v-on:click="$emit(\'remove\')" class="buttonDel">删除</button>\
    </li>\
  ',
    })
    var App = new Vue({
        el: '#app',
        data: {
            loggedEvent: '',
            tasks: [],
            checkedTodo:[],
            oldTodo:[],
        },
        methods: {
            addNewList: function () {
                this.tasks.push(this.todoNewList),
                        this.todoNewList = ''
            },
            handleDrop: function(item1, item2) {
                var mark = this.tasks[item1.id];
                this.tasks.$set(item1.id, this.tasks[item2.id]);
                this.tasks.$set(item2.id, mark);
            }
        },
        watch:{
            tasks:{
                handler: function(){
                    if(window.localStorage){
                        localStorage.setItem("taskss",JSON.stringify(this.tasks));
                    }else {
                        Cookie.write("todoList",this.items)
                    }
                }

            }
        }
    });
</script>
</body>
</html>